<template>
    <div>
      <van-sticky :offset-top="0">
        <van-nav-bar
                title="线下体验店"
                left-arrow
                @click-left="onClickLeft"
        />
        <span @click="toCity" class="city">{{cityName}}</span>
        <div id="container"></div>
        <van-nav-bar
        left-text="附近的线下门店"
        @click-left="onClickLeft"
        @click-right="onClickRight">
        <template #right>
        <van-icon name="search" size="18" />
        </template>
        </van-nav-bar>
      </van-sticky>
      <div class="wrapper" :style="{height:height}" ref="wrapp">
        <!--  -->

        <ul v-if="list.length">
            <li v-for="data in list" :key="data.id" >
            <!-- <img :src="data.image" alt="">
            <div class="name">{{data.name}}</div>
            <div class="desc">{{data.desc}}</div>
            <div class="price">￥ {{data.salePrice | relaPrice}}</div> -->
            <van-panel :title="data.storeTitle" :desc="data.storeAddress" @click="hankadd(data.storeLocation)">
            </van-panel>
            </li>
            <div v-if="isShow" style="text-align:center">没有更多了</div>
        </ul>
        <template v-else>
          <div class="zan">暂无门店</div>
        </template>
        <!-- </van-list> -->
      </div>
    </div>
</template>
<script>
import MapLoader from '@/util/map'
import http from '@/util/http'
import Vue from 'vue'
import { NavBar, Icon, Panel, Sticky } from 'vant'
import { mapMutations, mapState } from 'vuex'
import BetterScroll from 'better-scroll'
import location from '@/assets/dw.png'

Vue.use(NavBar).use(Icon).use(Panel).use(Sticky)
export default {
  data () {
    return {
      // finished: false,
      // loading: false,
      mapMain: null,
      list: [],
      cuttor: 1,
      totalCount: 0,
      height: 0,
      isShow: false,
      lngMain: 0,
      latMain: 0,
      markerMain: null
    }
  },
  computed: {
    ...mapState(['cityName', 'cityData'])
  },
  mounted () {
    const that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.mapMain = new AMap.Map('container', {
        center: [this.lngMain, this.latMain],
        zoom: 11
      })
    }, e => {
      console.log('地图加载失败', e)
    })

    this.height = document.documentElement.clientHeight - 364 + 'px'
    if (this.cityName) {
      http({
        url: `/heihei/api/geo/get_store_list_by_location?c=h5&s=20000&t=1605235156222&v=1.0&city=${this.cityName}&pn=1&ps=7`
      }).then(res => {
        this.list = res.data.data.pageList
        this.totalCount = res.data.data.totalCount
        if (this.list.length === 0) {
          this.hankadd('39.993857,116.33203')
          return
        }
        this.hankadd(this.list[0].storeLocation)
        this.$nextTick(() => {
          const scroll = new BetterScroll('.wrapper', {
            // scrollbar: {
            //   fade: true
            // },
            // movable: true,
            // zoom: true,
            // mouseWheel: true,
            probeType: 3,
            click: true // 默认不支持点击
            // mouseWheel: true
          })

          scroll.on('scrollEnd', (pos) => {
            // console.log(pos.x + '~' + pos.y)
            if (this.list.length === this.totalCount) {
              this.isShow = true
              scroll.off()
            }
            if (Number(pos.y) <= -100) {
              this.onLoad()
              scroll.refresh()
            }
          })
        })
      })
    } else {
      this.$router.push('/h5/pages/store-map/city')
    }
  },
  created () {
    this.hideAsides()
  },
  methods: {
    iccc () {
      MapLoader().then(AMap => {
        console.log('图标加载成功')
        const icon = new AMap.Icon({
          image: location,
          size: new AMap.Size(25, 35),
          imageSize: new AMap.Size(25, 35)
        })
        // 初始化覆盖物对象并赋值给vue对象
        this.markerMain = new AMap.Marker({
          icon: icon, // 使用自定义的图标
          position: [this.lngMain, this.latMain] // 覆盖物位置坐标
        })
        this.mapMain.add(this.markerMain) // 添加覆盖物到地图，与下方法同效
        // this.markerMain.set(this.mapMain) //添加覆盖物到地图，与上方法同效
        this.mapMain.setFitView() // 地图缩放等级和位置等自适应，可以放置折线对象等作为形参也可以为空
      }, e => {
        console.log('地图加载失败', e)
      })
    },
    ...mapMutations(['showAsides', 'hideAsides']),
    onClickLeft () {
      this.showAsides()
      this.$router.push('/h5/pages/home/index')
    },
    onClickRight () {
      this.$router.push('/h5/pages/store-map/search')
    },
    toCity () {
      // this.getcity()
      this.$router.push('/h5/pages/store-map/city')
    },
    onLoad () {
      this.cuttor++
      http({
        url: `/heihei/api/geo/get_store_list_by_location?c=h5&s=20000&t=1605235156222&v=1.0&city=${this.cityName}&pn=${this.cuttor}&ps=7`
      }).then(res => {
        this.list = [...this.list, ...res.data.data.pageList]
        // this.loading = false
      })
    },
    hankadd (storeLocation) {
      const dh = storeLocation.indexOf(',')
      this.latMain = Number(storeLocation.slice(0, dh))
      this.lngMain = Number(storeLocation.slice(dh + 1))
      this.iccc()
    }
  }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
}
  .van-nav-bar{
    color: #000;
  }
  .city{
    position: absolute;
    top: 65px;
    right: 15px;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    z-index: 999;
    background: #fff;
  }
  #container{
    width: 100%;
    height: 272px;
    // background: url(//webmap0.bdimg.com/image/api/bg.png);
  }
  .wrapper{
    height: 500px;
    overflow: hidden;
  }
</style>
